<template>
    <div class="my-footer">
        <ul class="common-links">
            <li>
                <a href="#">登录</a>
            </li>
            <li>
                <a href="#">注册</a>
            </li>
            <li>
                <a href="#">客户服务</a>
            </li>
            <li>
                <a
                    href="#"
                    onclick="window.scrollTo(0,0);"
                    style="border-right: 1px solid transparent"
                >返回顶部</a>
            </li>
        </ul>
        <ul class="common-icons">
            <li>
                <a href="javascript: void(0)">
                    <img src="@/assets/img/bottom01.png" />
                </a>
            </li>
            <li>
                <a href="javascript: void(0)">
                    <img src="@/assets/img/bottom02.png" />
                </a>
            </li>
            <li>
                <a href="javascript: void(0)">
                    <img src="@/assets/img/bottom03.png" />
                </a>
            </li>
        </ul>
        <div class="common-copyright">Copyright © 2004-2019 京东JD.com 版权所有</div>
    </div>
</template>

<script>
export default {
    name: "MyFooter"
};
</script>

<style lang="scss">
.my-footer {
    width: 100%;
    padding-top: 15px;
    padding-bottom: 65px;
    background-color: #fff;
    .common-links {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        border-radius: 1px solid #ccc;
        li {
            flex: 1;
            // height: 58px;
            text-align: center;
            a {
                font-size: 14px;
                color: #848689;
                padding: 3px 0px 0px;
                text-decoration: none;
            }
        }
    }
    .common-icons {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        li {
            flex: 1;
            text-align: center;
            a {
                font-size: 12px;
                color: #868489;
                text-decoration: none;
                img {
                    width: 60px;
                }
            }
        }
        // &::before{
        //     content: '';
        //     display: block;
        //     width: 100%;
        //     height: 1px;
        //     color: #ccc;
        // }
    }
    .common-copyright {
        text-align: center;
        color: #868489;
        font-size: 12px;
    }
}
</style>
